<script lang="ts" setup>
import { useRefModel } from "@/utils/hooks";

defineOptions({
  name: "ArticleEllipsisContent",
});

let props = defineProps({
  content: {
    type: [String],
  },
  title: {
    type: [String],
  },
  item: {
    type: [Object],
    default: () => ({}),
  },
  isShowReadMore: {
    type: [Boolean],
    default: false,
  },
  expandText: {
    type: [String],
    default: i18n.global.t("title07"),
  },
  handleExpand: {
    type: [Function],
    default: () => () => {},
  },
  ads_id_320_100: {
    type: [String, Number],
  },
  isShowAdvert: {
    type: [Boolean],
    default: true,
  },
  ads_type: {
    type: [String, Number],
    default: 1, // 320 * 100
  },
  ads_class: {
    type: [String],
    default: "br-rb-lb-10",
  },
  isShowDetailAdvert: {
    type: [Boolean],
    default: false,
  },
  bodyRows: {
    type: [String, Number],
    default: bodyRows.value,
  },
  calc_type: {
    type: [String, Number],
    default: 2, // 1: 第一个卡片 2: 卡片列表
  },
});
let emit = defineEmits([
  "update:isShowReadMore",
  "update:content",
  "update:item",
  "update:title",
  "update:expandText",
  "update:ads_id_320_100",
  "update:isShowAdvert",
  "update:ads_type",
  "update:ads_class",
  "update:isShowDetailAdvert",
  "update:bodyRows",
  "update:calc_type",
]);
let isShowReadMore = useRefModel(props, "isShowReadMore", emit);
let content = useRefModel(props, "content", emit);
let item = useRefModel(props, "item", emit);
let title = useRefModel(props, "title", emit);
let expandText = useRefModel(props, "expandText", emit);
let ads_id_320_100 = useRefModel(props, "ads_id_320_100", emit);
let isShowAdvert = useRefModel(props, "isShowAdvert", emit);
let ads_type = useRefModel(props, "ads_type", emit);
let ads_class = useRefModel(props, "ads_class", emit);
let isShowDetailAdvert = useRefModel(props, "isShowDetailAdvert", emit);
let body_rows = useRefModel(props, "bodyRows", emit);
let calc_type = useRefModel(props, "calc_type", emit);

let hostname = location.hostname;
import { ads_ids, bodyRows, DOMAINS } from "@/config/ads_ids";
import i18n from "@/locales/i18n";

let style = {
  height: ads_type.value * 1 === 0 ? "250px !important" : "100px !important",
};

let ads_id_320_250 = ref<any>(0);
if (DOMAINS.includes(hostname)) {
  ads_id_320_250.value = ads_ids[hostname]["list_index"]["ads_ids_320_250"][0];
} else {
  ads_id_320_250.value = ads_ids["default_list_index_id"];
}
let ads_320_100_ref = ref<any>(null);
let body_rows_2 = ref(body_rows.value);
let body_rows_1 = computed(() => body_rows.value);
function isEmptyElement(element: { innerHTML: any }) {
  if (element) {
    return isEmptyType(element.innerHTML);
  } else {
    return true;
  }
}
const observerAds = new MutationObserver(function (mutationsList) {
  for (let mutation of mutationsList) {
    let ins: any = mutation.target;
    if (
      mutation.type === "attributes" &&
      mutation.attributeName === "data-ad-status"
    ) {
      let dataAdStatus = ins.getAttribute(mutation.attributeName);
      if (dataAdStatus && dataAdStatus === "unfilled") {
        if (calc_type.value === 1) {
          body_rows.value = body_rows.value + 4;
        }
        if (calc_type.value === 2) {
          body_rows_2.value = body_rows.value + 4;
        }
      }
      if (dataAdStatus && dataAdStatus === "filled") {
        if (calc_type.value === 1) {
          body_rows.value = body_rows.value;
        }
        if (calc_type.value === 2) {
          body_rows_2.value = body_rows.value;
        }
      }
    }
    if (isEmptyElement(ins)) {
      ins.parentElement.style.display = "none";
      body_rows.value = body_rows.value + 4;
      body_rows_2.value = body_rows.value + 4;
    }
  }
});

onMounted(() => {
  if (ads_320_100_ref.value?.$el) {
    let ins = ads_320_100_ref.value?.$el.querySelector(".adsbygoogle");
    observerAds.observe(ins, {
      attributes: true,
    });
  }
});
let body_rows_s = computed<any>(() => ({
  1: body_rows_1.value,
  2: body_rows_2.value,
}));
</script>
<template>
  <div class="article">
    <ArticleEllipsisTitle v-model:title="title" class="pl-10 pr-10" />
    <Advert
      v-if="DOMAINS.includes(hostname) && isShowDetailAdvert"
      ads_type="0"
      style="height: 250px !important"
      v-model:ads_id="ads_id_320_250"
    />
    <ArticleEllipsisBody
      v-model:content="content"
      v-model:item="item"
      v-model:isShowReadMore="isShowReadMore"
      v-model:expandText="expandText"
      :handleExpand="handleExpand"
      class="pl-10 pr-10"
      v-model:bodyRows="body_rows_s[calc_type]"
    />
    <Advert
      v-if="DOMAINS.includes(hostname) && isShowDetailAdvert"
      ads_type="0"
      style="height: 250px !important"
      v-model:ads_id="ads_id_320_250"
    />

    <Advert
      v-if="DOMAINS.includes(hostname) && isShowAdvert"
      :style="style"
      v-model:ads_type="ads_type"
      v-model:ads_id="ads_id_320_100"
      v-model:ads_class="ads_class"
      ref="ads_320_100_ref"
    />
  </div>
</template>
<style lang="scss" scoped>
.article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  row-gap: 10px;
  /* padding: 0 10px; */
}
</style>
